/**
 * Created by Administrator on 2016/7/15.
 */
window.onload=function(){
    //删除弹窗
    popWin();
}


//删除弹窗
function popWin(){
    //1点击删除按钮，显示弹出层 block
    //2弹出框需要动画显示    addClass
    //3点击的时候删除按钮需要动画打开盖子    加过度和转换
    //4点击取消的时候需要隐藏弹出框   none
    //5让盖子动画的盖回去    默认

    //获取dom元素
    //删除按钮
    var deleteBtns=document.querySelectorAll(".delete_box");
    //弹出层
    var jdWin=document.querySelector(".jd_win");
    //弹出框
    var jdWinBox=jdWin.querySelector(".jd_win_box");
    //取消按钮
    var cancel=jdWinBox.querySelector(".cancel");
    var up="";



    for(var i=0;i<deleteBtns.length;i++){
        //1点击删除按钮，显示弹出层 block
        deleteBtns[i].onclick=function(){
            //显示弹出层
            jdWin.style.display="block";
            //2弹出框需要动画显示    addClass
            jdWinBox.classList.add('myBounceInDown');
            //3点击的时候删除按钮需要动画打开盖子    加过度和转换
            //找到盖子
            up=this.querySelector(".delete_up");

            //加过渡
            up.style.transition="all 1s";
            up.style.webkitTransition="all 1s";

            //设置旋转原点
            up.style.transformOrigin="left bottom";
            up.style.webkitTransformOrigin="left bottom";

            //旋转
            up.style.transform="rotate(-30deg) translateY(2px)";
            up.style.webkitTransform="rotate(-30deg) translateY(2px)";

        }
    }

    cancel.onclick=function(){
        //隐藏弹出层
        jdWin.style.display="none";
        if(up){
            up.style.transform="none";
            up.style.webkitTransform="none";
        }
    }
}